<template>
	<view>
		<view class="title_box">
			<view class="logo">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="title">
				汉家承
			</view>
		</view>
		<view class="main_box">
			<view class="list">
				<view class="text text02 iconfont22">&#xe60e;</view>
				<input type="text" v-model="username" placeholder="请输入账号" />
			</view>
			<view class="list">
				<view class="text text02 iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd" placeholder="请输入登录密码" />
			</view>
			<!-- <view class="bottom-title">
				<view class="forget" @tap="gotopage" data-url="/pages/public/forget">忘记密码？</view>
				<view class="forget color1" @tap="gotopage" data-url="/pages/personal/service">我要加盟</view>
			</view> -->
			<view class="but-color1" @tap="login">登录</view>
		</view>
		
		<view class="banner_box" @tap="gotopage" data-url="/pages/personal/service">
			<image :src="url+'logo02.png'"  mode="widthFix"></image>
		</view>
		
	<!-- 	<view class="footer">汉家承 版权所有</view> -->
	</view>
</template>

<script>

export default {
	data() {
		return {
			url:this.Cfg.Setting.img,
			username: '',
			pwd: '',
			code: '',
			countdown: '获取验证码',
			disabled: false,
			timestatus: false,
			clear: '',
			menu: 0,
			tick: true
		};
	},
	onLoad() {},
	methods: {
		radioChange(e) {
			//console.log(this.tick)
			this.tick = !this.tick;			
		},
		onBackPress(event) {
			uni.switchTab({
				url: '/pages/index/index'
			});
			return true;
		},
		onNavigationBarButtonTap(e) {
			var that = this;
			if (e.index == 0) {
				//console.log(e)
				that.Nav._to({ url: '/pages/public/reg', type: 1 });
			}
		},

		login() {
			
			var that = this;
			
			if (that.menu == 0) {
				if (!that.username || !that.pwd) {
					that.Msg.Fail('请输入完整信息');
					return;
				}
			} else if (that.menu == 1) {
				if (!that.username || !that.code) {
					that.Msg.Fail('请输入完整信息');
					return;
				}
			}

			that.Net._get('login', { username: that.username, pwd: that.pwd, code: that.code, menu: that.menu }, res => {
				if (res.code == 1) {
					that.Net._setToken(res.data.api_token);
					that.Msg.Success('登陆成功', res => {
						console.log(111)
						that.Nav._to({ url: '/pages/personal/personal', type: 2});
					});
				}
			});
		},
		backPage() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.menu = index;
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		// 获取验证码
		getCode() {
			var that = this;
			if (!that.phone) {
				that.Msg.Fail('请填写手机号');
				return;
			}
			that.disabled = true; //禁用点击
			that.countdown = 60;
			that.timestatus = true;
			that.clear = setInterval(that.countDown, 1000);

			that.Net._get('code', { phone: that.phone, event: 'login' }, res => {
				if (res.code == 1) {
					that.Msg.Success('发送成功');
				}
			});
		},
		// 倒计时
		countDown() {
			var that = this;
			if (!that.countdown) {
				that.disabled = false;
				that.timestatus = false;
				that.countdown = '获取验证码';
				clearInterval(that.clear);
			} else {
				--that.countdown;
			}
		}
	}
};
</script>
<style>
	page {
		height: 100%;
		background: linear-gradient(to bottom, #E5F4F4, #F8FAF9);
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>


.title_box {
	width: 100%;
}

.title_box .logo {
	width: 20vw;
	height: 20vw;
	margin: 0 auto;
	margin-top: 10vh;
}

.title_box .logo image{
	width: 100%;
	height: 100%;
}
.title_box .title {
	font-size: 5vw;
	color: #333;
	margin-top: 3vw;
	margin-bottom: 5vh;
	text-align: center;
	font-weight: bold;
	position: relative;
}

.title .line {
	width: 100%;
	height: 3vw;
	background-color: #4d726f;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}
.bottom-title {
	display: flex;
	justify-content: space-between;
	width: 85%;
	margin: 0 auto;
}
.main_box{
	width: 94%;
	background: #FFFFFF;
	border-radius: 15rpx;
	box-shadow: 0 0  10rpx #d6d6d6;
	padding: 60rpx 0;
	margin-left: 3%;
}
.list {
	width: 80vw;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-top: 2vh;
	position: relative;
	border-bottom: 1px solid #e8e8e8;
	line-height: 120upx;
	text {
		margin-right: 5vw;
	}
	.text02{
		font-size: 7vw;
		color: #333;
	}
	input {
		flex: 1;
		height: 100upx;
		padding-left: 50upx;
	}
	.yzm {
		position: absolute;
		right: 0;
		top: 5px;
		border: 1px solid #4d726f;
		padding: 5px;
		border-radius: 5px;
		color: #4d726f;
		font-size: 12px;
	}
}
.forget {
	margin-top: 3vh;
	color: #999;
	text-align: center;
	font-size: 3.8vw;
}

.tick_box {
	width: 80%;
	margin: 3vw auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tick_box .text {
	font-size: 3vw;
	color: #999;
}
.footer{
	position: fixed;
	bottom: 2vw;
	width: 100%;
	text-align: center;
	font-size: 22rpx;
	color: #999;
}

.but-color1{
	border-radius: 2vw;
}

.banner_box{
	width: 93%;
	margin: 4% auto 0;
}

.banner_box image{
	width: 100%;
}
</style>
